<template>
  <!-- 饼图1 -->
  <div ref="index" class="index"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
// 定义值
let index = ref(); //ref的应用
// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(index.value);
  //props.carData
  let bgColor = "#001037";
  let title = "总量";
  let color = [
    "#38cafb",
    "#4caff9",
    "#4adeca",
    "#2aa7ee",
    "#0270f2",
    "#488cf7",
  ];
  let echartData = [
    {
      name: "A类",
      value: "3720",
    },
    {
      name: "B类",
      value: "2920",
    },
    {
      name: "C类",
      value: "2200",
    },
    {
      name: "D类",
      value: "1420",
    },
    {
      name: "E类",
      value: "3200",
    },
    {
      name: "F类",
      value: "2420",
    },
  ];

  let formatNumber = function (num: any) {
    let reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ",");
  };
  let total = echartData.reduce((a, b) => {
    return a + b.value * 1;
  }, 0);

  let option = {
    backgroundColor: bgColor,
    color: color,
    tooltip: {
      trigger: "item",
      backgroundColor: "#07172c",
      textStyle: {
        color: "rgba(126,199,255,1)",
      },
    },
    title: [
      {
        text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
        top: "center",
        left: "center",
        textStyle: {
          rich: {
            name: {
              fontSize: 14,
              fontWeight: "normal",
              color: "#fefefe",
              padding: [10, 0],
            },
            val: {
              fontSize: 12,
              fontWeight: "bolder",
              color: "#fefefe",
            },
          },
        },
      },
      {
        text: "单位：个",
        top: 20,
        left: 20,
        textStyle: {
          fontSize: 14,
          color: "#666666",
          fontWeight: 400,
        },
        show: false,
      },
    ],
    series: [
      {
        type: "pie",
        roseType: "radius",
        radius: ["45%", "80%"],
        center: ["50%", "50%"],
        data: echartData,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            borderColor: bgColor,
            borderWidth: 2,
          },
        },
        labelLine: {
          normal: {
            length: 20,
            length2: 20,
            lineStyle: {
              // color: '#e6e6e6'
            },
          },
        },
        label: {
          normal: {
            formatter: (params) => {
              return (
                "{icon|●}{name|" +
                params.name +
                "}\n{value|" +
                formatNumber(params.value) +
                "}"
              );
            },
            // padding: [0 , -100, 25, -100],
            rich: {
              icon: {
                fontSize: 14,
                color: "inherit",
              },
              name: {
                fontSize: 16,
                padding: [0, 0, 0, 10],
                color: "#fefefe",
              },
              value: {
                fontSize: 12,
                fontWeight: "bolder",
                padding: [10, 0, 0, 20],
                color: "inherit",
                // color: '#333333'
              },
            },
          },
        },
      },
    ],
  };

  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 200px;
}
</style>
